<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style>
		*{margin:0;padding:0;}
		.div1{
			width: 300px;
			height: 300px;
			background-color:#f99;
			cursor:move;
			position:absolute;
		}
    </style>
</head>
<body>
	<div class="div1"></div>
	<script src="machine.js"></script>
	<script>
		// 1.给元素本身绑定onmousedown事件
		// 2.clone元素并改变不透明度
		// 3.给整个页面绑定onmousemove事件并实时获取到当前光标相对于整个页面位置并将坐标赋值给阴影
		// 4.给整个页面绑定onmouseup事件(去掉阴影,并把阴影的位置赋值给原来的元素)
		var body = $("body");
		
		$(".div1").onmousedown = function(e){
			var originNode = this;
			
			// 阴影
			var shadow = this.cloneNode(true);
			shadow.style.opacity = 0.3;
			body.appendChild(shadow);
			
			// 获取鼠标按下时光标相对于元素边缘的位置;
			var X = e.offsetX;
			var Y = e.offsetY;
			
			// 当鼠标在可拖动元素按下时为整个页面绑定鼠标移动事件
			
			window.onmousemove = function(e){
				var x = e.clientX;
				var y = e.clientY;
				// 阴影跟随鼠标移动
				shadow.style.left = x - X + "px";
				shadow.style.top = y - Y + "px";
				
			}
			
			window.onmouseup = function(){
				// 改变原元素的位置
				originNode.style.top = shadow.style.top;
				originNode.style.left = shadow.style.left;
				// 移除阴影元素
				shadow.parentNode.removeChild(shadow)
				
				window.onmouseup = null;
				window.onmousemove = null;
			}
			
			
		}
	</script>
</body>
</html>

